import React from "react";

class MyWebGljs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  componentDidMount() {
    const canvas = document.getElementById("myCanvas");
    const gl = canvas.getContext("webgl");
    gl.clearColor(0, 0, 0, 1); // 黑色
    gl.clear(gl.COLOR_BUFFER_BIT);

    this.testgl();
  }

  testgl() {
    let drawing = document.getElementById("drawing");
    if (drawing.getContext) {
      let gl = drawing.getContext("webgl", { alpha: false });
      if (gl) {
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        let buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.5, 1]), gl.STATIC_DRAW);
//顶点着色器
let vertexGlsl = document.getElementById("shader-vs").text,
fragmentGlsl = document.getElementById("shader-fs").text;
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexGlsl);
gl.compileShader(vertexShader);
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentGlsl);
gl.compileShader(fragmentShader);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

let uColor = gl.getUniformLocation(program, "uColor");
    gl.uniform4fv(uColor, [0, 0, 0, 1]);
    let aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
    gl.enableVertexAttribArray(aVertexPosition);
    //  gl.vertexAttribPointer(aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);

    

      }
    }
  }
  render() {
    const style = {
      border: "1px solid black",
    };
    return (
      <div>
        <canvas id="myCanvas" width="200" height="100" style={style}></canvas>
        <br />
        <canvas id="drawing" width="200" height="100" style={style}></canvas>
      </div>
    );
  }
}
export default MyWebGljs;
